<template>
	<view class="content">
		<search class="mSearch-input-box" :mode="2" button="inside" :placeholder="defaultKeyword" @search="doSearch" @input="inputChange"
		 @confirm="doSearch" v-model="keyword"></search>
		<view class="student-list">
			<view class="class-name">{{studentList.parent}}</view>
			<view class="three" v-for="(item,index) in filterList" :key="index" @click="itemClick(item.id)">
				<view class="three-title">{{item.name}}</view>
				<image class="three-more" src="/static/report/report_more.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	import ReportService from '@/services/report/index';
	import Search from '@/components/common/mehaotian-search-revision/mehaotian-search-revision.vue';
	const reportService = new ReportService();
	export default {
		components: {
			Search
		},
		data() {
			return {
				defaultKeyword: '请输入关键字',
				keyword: '',
				showSkeleton: true,
				ascription: undefined,
				classId: undefined,
				studentList: {},
				filterList: [],
			}
		},
		onLoad(query) {
			this.ascription = query.ascription;
			this.classId = query.classId;
			this.loadData();
		},
		methods: {
			loadData() {
				const param = {
					ascription: this.ascription,
					classId: this.classId
				};
				reportService.studentList(param).then(response => {
					if (response.success) {
						this.studentList = response.result;
						this.filterList = this.studentList.children;
					} else {
						uni.showToast({
							title: response.message,
							icon: 'none',
							duration: 2000
						})
					}
				}).then(() => {
					this.showSkeleton = false;
				})
			},
			goStudentSearch() {
				uni.navigateTo({
					url: '/pages/report/studentSearch?ascription=' + this.ascription + '&classId=' + this.classId
				})
			},
			itemClick(userId) {
				uni.navigateTo({
					url: `/pages/report/studentAnalysis?ascription=${this.ascription}&userId=${userId}`
				})
			},
			doSearch() {
				if (isEmpty(this.keyword)) {
					uni.showToast({
						title: '请输入关键字',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				this.filterData();
			},
			inputChange() {
				this.filterData();
			},
			//根据输入关键字，过滤学生
			filterData() {
				const keyword = this.keyword;
				if (isEmpty(keyword)) {
					this.filterList = this.studentList.children;
					return;
				}
				this.filterList = this.studentList.children.filter(item => {
					return item.name.indexOf(keyword) != -1;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 20upx;
		background-color: #FFFFFF;
	}

	.mSearch-input-box {
		display: inline-block;
		width: 100%;
		box-shadow: 0 4upx 20upx 0 rgba(153, 153, 153, 0.15);
		border-radius: 60upx;
		border: solid 2upx #f7f7f7;
		margin: 40upx 0;
	}

	.search {
		margin: 40upx 0;
		height: 80upx;
		line-height: 70upx;
		box-shadow: 0 4upx 20upx 0 rgba(153, 153, 153, 0.15);
		border-radius: 8upx;
		border: solid 2upx #f7f7f7;
		padding: 0 20upx;
		display: flex;

		&-hint {
			flex: 1;
			font-size: 28upx;
			color: #999999;
		}

		&-img {
			margin-top: 28upx;
			width: 26upx;
			height: 26upx;
		}
	}

	.class-name {
		color: #333333;
		font-size: 30upx;
		line-height: 110upx;
		font-weight: 600;
	}

	.student-list {
		box-shadow: 0 4upx 20upx 0 rgba(153, 153, 153, 0.15);
		border-radius: 8upx;
		border: solid 2upx #f7f7f7;
		padding: 0 20upx;
	}

	.three {
		display: flex;
		line-height: 64upx;
		padding: 0 50upx;

		&-title {
			flex: 1;
			color: #333333;
			font-size: 24upx;
		}

		&-more {
			width: 24upx;
			height: 24upx;
			margin-top: 12upx;
		}
	}
</style>
